import React, { Component } from 'react'
import Styles from './index.less'
const news = [
  {
    link: 'http://iotx-ica-center-public.oss-cn-shanghai.aliyuncs.com/news/15368913532598698',
    title: 'ICA联盟成为GlobalPlatform’s Sixth Annual Seminar合作伙伴',
    detail: 'GlobalPlatform’s Sixth Annual Seminar将于9月19日在北京召开，本届研讨会的主题是“互联世界的安全”，将聚焦物联网和设备安全以及身份认证、支付和增值服务、内容保护机制、设备信任和认证话题。 受GlobalPlatform邀请，ICA联盟成为第六届GP Semin',
    img: 'http://iotx-ica-center-public.oss-cn-shanghai.aliyuncs.com/news/15368913532598698',
  },
  {
    link: 'http://iotx-ica-center-public.oss-cn-shanghai.aliyuncs.com/news/15368913532598698',
    title: 'ICA联盟成为GlobalPlatform’s Sixth Annual Seminar合作伙伴1',
    detail: 'GlobalPlatform’s Sixth Annual Seminar将于9月19日在北京召开，本届研讨会的主题是“互联世界的安全”，将聚焦物联网和设备安全以及身份认证、支付和增值服务、内容保护机制、设备信任和认证话题。 受GlobalPlatform邀请，ICA联盟成为第六届GP Semin',
    img: 'http://iotx-ica-center-public.oss-cn-shanghai.aliyuncs.com/news/15368913532598698',
  },
  {
    link: 'http://iotx-ica-center-public.oss-cn-shanghai.aliyuncs.com/news/15368913532598698',
    title: 'ICA联盟成为GlobalPlatform’s Sixth Annual Seminar合作伙伴2',
    detail: 'GlobalPlatform’s Sixth Annual Seminar将于9月19日在北京召开，本届研讨会的主题是“互联世界的安全”，将聚焦物联网和设备安全以及身份认证、支付和增值服务、内容保护机制、设备信任和认证话题。 受GlobalPlatform邀请，ICA联盟成为第六届GP Semin',
    img: 'http://iotx-ica-center-public.oss-cn-shanghai.aliyuncs.com/news/15368913532598698',
  },
  {
    link: 'http://iotx-ica-center-public.oss-cn-shanghai.aliyuncs.com/news/15368913532598698',
    title: 'ICA联盟成为GlobalPlatform’s Sixth Annual Seminar合作伙伴3',
    detail: 'GlobalPlatform’s Sixth Annual Seminar将于9月19日在北京召开，本届研讨会的主题是“互联世界的安全”，将聚焦物联网和设备安全以及身份认证、支付和增值服务、内容保护机制、设备信任和认证话题。 受GlobalPlatform邀请，ICA联盟成为第六届GP Semin',
    img: 'http://iotx-ica-center-public.oss-cn-shanghai.aliyuncs.com/news/15368913532598698',
  },
]
class NewsItem extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    const { data } = this.props
    return (
      <li className={Styles.newsItem}>
        <div className={Styles.newsLeft}>
          <img src={data.img}/>
        </div>
        <div className={Styles.newsRight}>
          <a>{data.title}</a>
          <p>{data.detail}</p>
        </div>
      </li>
    )
  }
}
export default class News extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div className={Styles.news}>
        <ul className={Styles.newsContainer}>
          {
            news.map((item) => (
              <NewsItem data={item} key={item.title}/>
            ))
          }
        </ul>
      </div>
    )
  }
}
